<template>
    <div style="max-width:640px;widht:100%">
        <router-link to="/scanPhoto">扫描二维码</router-link>
        <!-- <van-cell-group>
            <van-cell title="单元格" value="123" />
            <van-cell title="单元格" value="内容"  />
        </van-cell-group> -->
        <van-cell-group>
            <van-field right-icon="warning-o"  class="bg-Percolor"  v-model="value" label="设备编号" placeholder="点击输入"  />
            
            <div class="van-cell van-field bg-Percolor2" >
                <div class="van-cell__title van-field__label">
                    <span>设备编号</span>
                </div>
                <div class="van-cell__value van-field__value" style="text-align: left;">
                    <div class="van-field__body qr-btn" node-type="qr-btn">
                        <div v-show="true">{{result}}</div>   
                        <div class="van-field__right-icon " style="position: absolute;right: 0px;top: 50%;margin-top: -12px;">
                            <i class="iconfont icon-camera2"></i>
                        </div>
                        <input v-show="false" @change="changeInfo" type="file" placeholder="点击输入" name="myPhoto" class="van-field__control " node-type="jsbridge" >
                        
                    </div>
                </div>
            </div>


            <van-field class="bg-Percolor2" v-model="value" label="车牌号码" placeholder="点击输入" />
            <van-field readonly @click="(carTypeShow = true)" class="bg-Percolor" v-model="formTabel.carType" label="车牌类型" placeholder="请选择" />
            <van-field readonly @click="(carTypeShow = true)" class="bg-Percolor2" v-model="formTabel.carType" label="车牌颜色" placeholder="请选择" />
            <van-field class="bg-Percolor" v-model="value" label="车架号(VIN)" placeholder="点击输入" />
            

            <div class="van-cell van-field bg-Percolor2" >
                <div class="van-cell__title van-field__label">
                    <span>企标平台</span>
                </div>
                <div class="van-cell__value van-field__value" style="text-align: left;">
                    <input type="text" v-model="formTabel.url" placeholder="输入IP或域名" class="van-field__control" style="display:inline-block;width:auto">
                    <b style="color:red">:</b>
                    <input  type="text" v-model="formTabel.port" style="display:inline-block;width:auto" placeholder="端口" class="van-field__control">
                </div>
            </div>
            <div class="van-cell van-field bg-Percolor2" >
                <div class="van-cell__title van-field__label">
                    <span>部标平台1</span>
                </div>
                <div class="van-cell__value van-field__value" style="text-align: left;">
                    <input type="text" v-model="formTabel.url" placeholder="输入IP或域名" class="van-field__control" style="display:inline-block;width:auto">
                    <b style="color:red">:</b>
                    <input  type="text" v-model="formTabel.port" style="display:inline-block;width:auto" placeholder="端口" class="van-field__control">
                </div>
            </div>
            <van-field readonly @click="(carTypeShow = true)" style="background:rgb(173,216,230)" v-model="formTabel.carType" label="执行标准" placeholder="请选择" />


           <div class="van-cell van-field bg-Percolor2" >
                <div class="van-cell__title van-field__label">
                    <span>平台版本</span>
                </div>
                <div class="van-cell__value van-field__value" style="text-align: left;">
                     <van-radio-group v-model="formTabel.radio" direction="horizontal">
                        <van-radio name="1">2013</van-radio>
                        <van-radio name="2">2019</van-radio>
                    </van-radio-group>
                </div>
            </div>

            <div class="van-cell van-field bg-Percolor2" >
                <div class="van-cell__title van-field__label">
                    <span>部标平台2</span>
                </div>
                <div class="van-cell__value van-field__value" style="text-align: left;">
                    <input type="text" v-model="formTabel.url" placeholder="输入IP或域名" class="van-field__control" style="display:inline-block;width:auto">
                    <b style="color:red">:</b>
                    <input  type="text" v-model="formTabel.port" style="display:inline-block;width:auto" placeholder="端口" class="van-field__control">
                </div>
            </div>
            <van-field readonly @click="(carTypeShow = true)" style="background:rgb(173,216,230)" v-model="formTabel.carType" label="执行标准" placeholder="请选择" />
           <div class="van-cell van-field bg-Percolor2" >
                <div class="van-cell__title van-field__label">
                    <span>平台版本</span>
                </div>
                <div class="van-cell__value van-field__value" style="text-align: left;">
                     <van-radio-group v-model="formTabel.radio" direction="horizontal">
                        <van-radio name="1">2013</van-radio>
                        <van-radio name="2">2019</van-radio>
                    </van-radio-group>
                </div>
            </div>

            <div class="van-cell van-field bg-Percolor2" >
                <div class="van-cell__title van-field__label">
                    <span>部标平台3</span>
                </div>
                <div class="van-cell__value van-field__value" style="text-align: left;">
                    <input type="text" v-model="formTabel.url" placeholder="输入IP或域名" class="van-field__control" style="display:inline-block;width:auto">
                    <b style="color:red">:</b>
                    <input  type="text" v-model="formTabel.port" style="display:inline-block;width:auto" placeholder="端口" class="van-field__control">
                </div>
            </div>
            <van-field readonly @click="(carTypeShow = true)" style="background:rgb(173,216,230)" v-model="formTabel.carType" label="执行标准" placeholder="请选择" />
           <div class="van-cell van-field bg-Percolor2" >
                <div class="van-cell__title van-field__label">
                    <span>平台版本</span>
                </div>
                <div class="van-cell__value van-field__value" style="text-align: left;">
                     <van-radio-group v-model="formTabel.radio" direction="horizontal">
                        <van-radio name="1">2013</van-radio>
                        <van-radio name="2">2019</van-radio>
                    </van-radio-group>
                </div>
            </div>

            <div class="van-cell van-field bg-Percolor2" >
                <div class="van-cell__title van-field__label">
                    <span>货运平台</span>
                </div>
                <div class="van-cell__value van-field__value" style="text-align: left;">
                    <input type="text" v-model="formTabel.url" placeholder="输入IP或域名" class="van-field__control" style="display:inline-block;width:auto">
                    <b style="color:red">:</b>
                    <input  type="text" v-model="formTabel.port" style="display:inline-block;width:auto" placeholder="端口" class="van-field__control">
                </div>
            </div>
       
           <div class="van-cell van-field bg-Percolor2" >
                <div class="van-cell__title van-field__label">
                    <span>平台版本</span>
                </div>
                <div class="van-cell__value van-field__value" style="text-align: left;">
                     <van-radio-group v-model="formTabel.radio" direction="horizontal">
                        <van-radio name="1">2013</van-radio>
                        <van-radio name="2">2019</van-radio>
                    </van-radio-group>
                </div>
            </div>
            <van-field class="bg-Percolor2" v-model="value" label="休眠上传时间" placeholder="点击输入(单位秒)" />
            
            <van-field readonly @click="(carTypeShow = true)" style="background:rgb(173,216,230)" v-model="formTabel.carType" label="省" placeholder="请选择" />
            <van-field readonly @click="(carTypeShow = true)" style="background:rgb(173,216,230)" v-model="formTabel.carType" label="市" placeholder="请选择" />
            <van-field style="background:rgb(173,216,230);color:red" v-model="value" label="终端型号" placeholder="点击输入" />
            <van-field style="background:rgb(173,216,230);color:red" v-model="value" label="厂商编码" placeholder="点击输入" />
            <van-field style="background:rgb(173,216,230);color:red" v-model="value" label="鉴权码" placeholder="点击输入" />
            <van-field style="background:rgb(173,216,230);color:red" v-model="value" label="脉冲系数" placeholder="点击输入" />
            <van-field style="background:rgb(173,216,230);color:red" v-model="value" label="里程设置" placeholder="点击输入(单位米)" />


        </van-cell-group>
        <div>
            <div class="qr-btn" node-type="qr-btn">扫描二维码2
                <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码2" />
            </div>
        </div>
        <div v-if="false" class="result-qrcode">
        </div>

         <van-popup v-model="carTypeShow" position="bottom" :style="{ height: '50%' }" >
             <van-picker
                title="标题"
                show-toolbar
                :columns="option.optionCarType"
                @confirm="onConfirm"
                @cancel="onCancel"
                @change="onChange"
                />

         </van-popup>
    </div>
</template>
<script>
import Vue from 'vue';
import * as zepto from "../util/zepto"
import * as qrcodeMin from "../util/qrcode.lib.min.js"
import * as qrcode from "../util/qrcode"
import { Cell, CellGroup,Field ,DropdownMenu, DropdownItem ,Picker ,Popup,RadioGroup, Radio,Icon   } from 'vant';
Vue.use(Icon);
Vue.use(Popup);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Picker);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Field);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
export default {
    data(){
        return{
            result:'',
            value:"",
            value1:"",
            carTypeShow:false,
            formTabel:{
                carType:"",
                // carTypeId:"",
                url:"",
                port:"",
                radio:"",


            },
            option:{
                 optionCarType: [
                    { text: '保时捷', value: 0 },
                    { text: '宝马', value: 1 },
                    { text: '大众', value: 2 },
                ],
            }
           
        }
    },
    methods:{
        changeInfo(){
            console.log("改变")
            setTimeout(() => {
                this.result = sessionStorage.getItem('results')
            }, 500);

        },
        initData(){
            Qrcode.init($('[node-type=qr-btn]'));
        },
        onConfirm(value, index){
            console.log("确认",value,index)
            this.formTabel.carType = value.text
            this.carTypeShow=false
            
        },
        onCancel(){
            console.log("取消")
            this.carTypeShow=false
        },
        onChange(picker, value, index){
            console.log("发生改变",picker,value,index)
        }

    },
    mounted(){
        this.initData();
    }
}
</script>
<style lang="scss" scoped>
 $bg-color:rgb(234,237,242);
 $bg-color2:rgb(173,216,230);

    .bg-Percolor{
        background:  $bg-color2 ;
    }
    .bg-Percolor2{
        background:  $bg-color ;
    }
    
    .tableItem{
        position: relative;
        box-sizing: border-box;
        width: 100%;
        padding: 10px 16px;
        overflow: hidden;
        color: #323233;
        font-size: 14px;
        line-height: 24px;
    }
     .tableTitle{
        flex: none;
        box-sizing: border-box;
        width: 6.2em;
        margin-right: 12px;
        color: #646566;
        text-align: left;
        word-wrap: break-word;
    }
   
</style>